<template>
  <div class="sign">
    <div class="form">
      <a-form-model ref="form" :model="form" :labelCol="{span:6}" :wrapperCol="{span:18}" :rules="rules">
        <a-row>
          <a-col :span='12'>
            <a-form-model-item label="来访时间">
              <a-date-picker show-time placeholder="请选择来访时间" v-model="form.time" format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" />
            </a-form-model-item>
          </a-col>
          <a-col :span='12'>
            <a-form-model-item label="来访事由">
              <a-input placeholder="请输入来访事由" v-model="form.reason" @focus="openKeyBoard"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span='12'>
            <a-form-model-item label="体温" prop="temperature">
              <a-input placeholder="填写信息" v-model="form.temperature" @focus="openNumberKeyboard('temperature')"/>
            </a-form-model-item>
          </a-col>
          <a-col :span='12'>
            <a-form-model-item label="身体状况">
              <a-select default-value="normal" v-model="form.state">
                <a-select-option :value="0">
                  健康
                </a-select-option>
                <a-select-option :value="1">
                  异常
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span='12'>
            <a-form-model-item label="手机" prop="phone">
              <a-input placeholder="填写信息" v-model="form.phone" @focus="openNumberKeyboard('phone')" />
            </a-form-model-item>
          </a-col>
          <a-col :span='12'>
            <a-form-model-item label="姓名">
              <a-input placeholder="填写信息" :disabled="$env.NODE_ENV=='production'" v-model="form.name" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span='12'>
            <a-form-model-item label="性别">
              <a-select :disabled="$env.NODE_ENV=='production'" placeholder='选择性别' v-model="form.sex">
                <a-select-option :value="0">
                  男
                </a-select-option>
                <a-select-option :value="1">
                  女
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span='12'>
            <a-form-model-item label="身份证" prop="card">
              <a-input :disabled="$env.NODE_ENV=='production'"  v-model="form.card" placeholder="请刷身份"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span='12'>
            <a-form-model-item label="所在单位">
              <a-input placeholder="填写信息" v-model="form.unit" @focus="openKeyBoard"/>
            </a-form-model-item>
          </a-col>
          <a-col :span='12'>
            <a-form-model-item label="地理位置">
              <a-input placeholder="填写信息" v-model="form.address" @focus="openKeyBoard" />
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-form-item :wrapperCol="{offset:6,span:12}">
          <a-button type="primary" size='large' block @click="submit" :disabled="!canSubmit" style="backgroundColor:rgb(0,200,168)">
              提交
          </a-button>
        </a-form-item>
      </a-form-model>
    </div>

    <NumKeyboadr ref='numBoard' :visible.sync='showNumBoard' @change='changeNumBoard' />
  </div>
</template>

<script>
import {getCardIDInfo,getCardBaseInfo} from "../../../api/card";
import {addEnterRecord} from '../../../api/server';
import keyboard from '../../../mixins/keyboard';
import moment from 'moment';
import NumKeyboadr from '@/components/num_keyboard';

export default {
  name:"SignIn",
  mixins:[keyboard],
  components:{
    NumKeyboadr
  },
  data(){
    const validateTemperature=(rule, value, callback) =>{
      if(value<10||value>50){
        return callback(new Error('请输入正确的体温'));
      }
      callback();
    }
    const validatePhone=(rule, value, callback) =>{
      const reg=/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if(!(reg.test(value))){
        return callback(new Error('请输入正确的手机号'));
      }
      callback();
    }
    return {
      canSubmit:true,
      cardTimeId:null,
      showNumBoard:false,
      numType:'',
      numVal:'',
      kbOptions: {
        useKbEvents: false,
        preventClickEvent: false
      },
      rules:{
        card:[
          { required: true, message: '请刷身份', trigger: 'blur' }
        ],
        temperature:[
          { required: true,validator:validateTemperature,message: '请填写正确的体温',trigger: 'submit' }
        ],
        phone:[
          { required: true,validator:validatePhone, message: '请输入正确的手机号',trigger: 'submit' }
        ]
      },
      form:{
        time:"",
        reason:"",
        state:0,
        phone:"",
        name:"",
        sex:'选择性别',
        card:"",
        unit:"",
        temperature:"",
        address:''
      }
    }
  },
  beforeDestroy(){
    if(this.cardTimeId!=null){
      clearInterval(this.cardTimeId);
      this.cardTimeId=null
    }
  },
  created(){
    this.form.time=moment().format('YYYY-MM-DD HH:mm:ss');
    getCardBaseInfo().then(res =>{
      if(res.ret!=0) return;
      this.cardTimeId=setInterval(() =>{
        getCardIDInfo().then(res =>{
          //console.log(res)
          if(res.ret==0){
            //console.log(res.Certificate);
            this.form.card=res.Certificate.IDNumber;
            this.form.name=res.Certificate.Name;
            this.form.sex=res.Certificate.Sex=="男"?0:1;
          }
        })
      },5000)
    });
        //await broadcastVoice(0);
      
  },
  methods:{
    openKeyBoard(e){
      this.showNumBoard=false;
      this.onFocusKeyBoard(e);
    },

    changeNumBoard(val){
      if(this.numType=='phone'){
        this.form.phone=val;
      }
      if(this.numType=='temperature'){
        this.form.temperature=val;
      }
    },
    openNumberKeyboard(type){
      this.showNumBoard=true;
      this.numType=type;
      if(window._PKeyboard){
        window._PKeyboard.kill('SIGKILL');
        this.closeKeyBoard();
      }
      if(type=='temperature'){
        this.numVal=this.form.temperature;
        this.$refs['numBoard'].value=this.form.temperature;
      }
      if(type=='phone'){
        this.numVal=this.form.phone;
        this.$refs['numBoard'].value=this.form.phone;
      }
    },
    submit(){
      this.$refs.form.validate(valid => {
        if (valid) {
          this.canSubmit=false;
          const loginInfo=this.$store.getters['getLoginInfo'];
          const params={
            voucherNumber:loginInfo&&loginInfo.voucherNumber,
            logInId:loginInfo&&loginInfo.logInId,
            factoryId:this.$store.getters['getFactoryId'],
            reason:this.form.reason,
            phone:this.form.phone,
            name:this.form.name,
            idCardNumber:this.form.card,
            gender:this.form.sex,
            workSite:this.form.unit,
            animalHeat:this.form.temperature
          }
          addEnterRecord(params).then(data =>{
            this.$store.commit('setSignInfo',this.form);
            this.$store.commit('setQRCode',data);
            this.$router.push({
              name:"home-info"
            });
          });
            
        } else {
          return false;
        }
      });
    // this.$store.commit('setSignInfo',this.form);
    // this.$router.push({
    //     name:"home-info"
    // });
    },
    changeSex(value){
      this.form.sex=value;
    }
  }
}
</script>

<style lang="scss" scoped>
.sign{
    width: 100%;
    height: calc(100% - 45px);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    .form{
        width: 100%;
        height: 85%;
        text-align: left;
        overflow-y: scroll;
        ::v-deep{
            .ant-calendar-picker{
                width: 100%;
            }
            .ant-input, .ant-select-selection{
                background-color: rgb(77,77,76);
                color: white;
            }
            .ant-form-item-label>label{
                color: white;
            }
        }
    }
    .keyboard{
        position: absolute;
        bottom: 5px;
        width: 100%;
    }
}
</style>